<template>
  <view class="home flex column">
    <u-navbar :is-back="true" title="从业人员" :title-bold="true" title-color="#000" back-icon-color="#333"></u-navbar>
    <!-- 搜索框 -->
    <picker-item v-model="searchData.customerName" :options="nameList" @change="handleSelectChange" changeValue="id" />
    <!-- 列表 -->
    <scroll-view :scroll-y="true" class="container item one">
      <view class="container-body">
        <job :customerId="searchData.customerName" />
        <alarm :customerId="searchData.customerName"/>
        <person :customerNo="customerNo"/>
        <train :customerNo="customerNo"/>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import PickerItem from "../../components/pickerItem/pickerItem.vue";
import job from './components/main/job'
import alarm from './components/main/alarm'
import person from './components/main/person'
import train from './components/main/train'
export default {
  name: "index",
  components: { PickerItem ,job,alarm,person,train},
  data() {
    return {
      customerNo:'',
      searchData: {
        countyNo: "",
        customerName: "",
        pageSize: 20,
        pageNumber: 1,
      },
      nameList: [],// 搜索下拉的煤矿名称列表
    };
  },
  methods: {
    /**
     * 请求煤矿名称列表
     */
    getOptions() {
      this.$get(`/cyry/common/getCustomerList`).then(res=>{
        if (res && Array.isArray(res.body)) {
          const arr=res.body.map(el=>{
            return {
              ...el,
              id: el.customerId,
              label:el.customerName
            }
          })

          this.nameList = arr;
          getApp().globalData.customerList=arr
          this.$nextTick(()=>{
            this.searchData.customerName=arr[0].id
            this.customerNo=arr[0].customerNo
          })
        }
      })
     
    },
    /**
     * select选中
     */
    handleSelectChange(val) {
      console.log('teh',val);
      this.customerNo=val.customerNo
      // setTimeout(() => {
      //   this.getData();
      // }, 300);
    },
  },
  onLoad() {
    this.getOptions();
    
  },
};
</script>

<style lang="scss" scoped>
.home {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  .container {
    padding-bottom: 30rpx;
  }
}
</style>
